<nz-layout class='main'>

  <app-todo-contextmenu [currentTask]="currentItem" [visible]="contextmenuVisible" [x]="contextmenuX" [y]="contextmenuY">
  </app-todo-contextmenu>

  <div class="content" [ngStyle]="{'margin-right': isDetailDisplayed ? '360px' : 0}">

    <div class="left">
      <nz-header class="header">
        <h1 class="title" *ngIf="!isTitleClicked" (click)="clickTitle()">
          <span>{{title}}</span>
        </h1>
        <input type="text" [(ngModel)]="title" [ngStyle]="{'display': isTitleClicked ? 'block': 'none'}" [appRenameTitle]="renameTitleEvent"
          (blur)="rename()">
        <div class="options">
          <button (click)="showOptionMenu($event, 2)"><i class="anticon anticon-ellipsis"></i></button>
          <div class="menu" [ngStyle]="{'display': optionMenu.show ? 'block': 'none'}">
            <div class="menu-title">列表选项</div>
            <ul>
              <li *ngIf="!isStaticCurrentList"
                  (click)="clickTitle()">重命名清单</li>
              <li>更改主题</li>
              <li (click)="toggleShowDoneTasks()">
                <span *ngIf="optionMenu.showDoneTasks">隐藏已完成待办事项</span>
                <span *ngIf="!optionMenu.showDoneTasks">显示已完成待办事项</span>
              </li>
              <li *ngIf="!isStaticCurrentList"
                  (click)="deleteList()">删除清单</li>
            </ul>
          </div>
        </div>
      </nz-header>
      <ul class="todos">
        <li *ngFor="let task of tasks"
            (click)="changeDetail(task)"
            (dblclick)="openDetail(task)"
            (contextmenu)="handleContextmenu($event, task)">
          <div class="todo">
            <i [ngClass]="{'check': !task.isDone, 'checked': task.isDone}" [ngStyle]="{'vertical-align': task.today || task.deadline || task.notes ? '': 'middle'}"
              (click)="toggleDone(task, $event)">
            </i>
            <div class="todo-wrapper">
              <span class="todo-text" [ngClass]="{'todo-text-done': task.isDone}">
                {{task.todo}}
              </span>
              <div class="todo-notes" *ngIf="task.today || task.deadline || task.notes">
                <span *ngIf="task.today" [ngClass]="{'today': !task.isDone}">
                  ☀️ 我的一天
                  <i class="dot" *ngIf="task.deadline || task.notes">•</i>
                </span>
                <span *ngIf="task.deadline" [ngStyle]="{'color': renderDeadlineStyle(task.deadline, task.isDone)}">
                  ⏰ {{task.deadline | renderDeadline}}
                  <i class="dot" *ngIf="task.notes">•</i>
                </span>
                <span *ngIf="task.notes">📝 备注</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="newTodo">
        <i class="anticon anticon-plus" #addTask [class.hidden]="focused"></i>
        <i class="focused" #addTask [class.hidden]="!focused"></i>
        <input type="text" placeholder="添加待办事项" (focus)="focus()" (blur)="blur()" [(ngModel)]="newTodo">
        <a class="newLink" [class.hidden]="!focused"  (click)="addNewTask()">添
          <br/>加</a>
      </div>
    </div>

    <app-task-detail class="right"
      [currentTask]="currentItem"
      [ngStyle]="{'display': isDetailDisplayed ? 'block': 'none'}"
      (onHideDetail)="onHideDetail($event)">
    </app-task-detail>

  </div>

</nz-layout>
